<!-- 定义模版对象 -->
<template>
    <div class="search_box">
      <el-input
      type="text"
      v-model="queryInfo.query"
      placeholder="搜索书籍. . ."
      class="search_input"
      prefix-icon="el-icon-arrow-right"
      @keyup.enter.native="gosearch()">
      </el-input>
    </div>
</template>

<!-- 定义JS变量 -->
<script>
export default {
  data () {
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 15
      }
    }
  },
  methods: {
    async gosearch () {
      // alert("yes")
      console.log(this.queryInfo.query)
      // let {data:res} = this.$http.get('/book/searchall',this.queryInfo)
      // if(res.status !== 200) return this.$message.error("查询出错")
      // this.$message.success("查询成功")
      const { data: res } = await this.$http.get('/book/searchall', {
        params: this.queryInfo
      })
      // console.log(this.queryInfo)
      if (res.status !== 200) return this.$message.error('查询失败')
      this.$message.success('查询成功')
      console.log(res)
    }
  }
}
</script>

<!-- 防止组件冲突 -->
<style lang="less" scoped>
.search_box {
  position: absolute;
  left: 45%;
  top: 45%;
}

.search_input{
  border-radius: 10px;
  height: 20px;
}
</style>
